<template>
  <div class="dashboard-editor-container">
    <panel-group :list="PanelGroup"></panel-group>
    <to-do v-model="setline" ref="todo">
      <template slot="tabs">
        <el-radio-group v-model="setline" size="small" @change="handleSetLineChartData">
          <el-radio-button border :label="`all`">支付总收益</el-radio-button>
          <el-radio-button border :label="`WX_PAY`">微信支付</el-radio-button>
          <el-radio-button border :label="`ALI_PAY`">支付宝支付</el-radio-button>
          <el-radio-button border :label="`IOS_PAY`">IOS支付</el-radio-button>
          <el-radio-button border :label="`WITHDRAW`">已提现</el-radio-button>
          <el-radio-button border :label="`DEALWITH`">待提现</el-radio-button>
        </el-radio-group>
      </template>
    </to-do>
  </div>
</template>

<script>
import handleSetLineChartData from '@/util/chart';

export default {
  name: 'StatisticsText',
  mixins: [handleSetLineChartData],
  data () {
    return {
      rate: 100,
      setline: 'all',
      api: 'incomeChart',
      PanelGroup: [{
        name: 'VIP收益',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '佣金成本',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '微信支付收益',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '微信支付成本',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '支付宝支付收益',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '支付宝支付成本',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: 'IOS收益',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: 'IOS成本',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '已提现佣金',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }, {
        name: '待提现佣金',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }],
      chartData: {
        time: [],
        total: []
      }
    };
  },
  created () {
    this.getData();
  },
  methods: {
    async getData () {
      const { code, data, message } = await this.$API.incomeStatistics();

      if (code === 200) {
        const { viewStatistics } = data;

        if (viewStatistics) {
          this.$set(this.PanelGroup, 0, {
            name: 'VIP收益',
            viewStatistics: {
              allData: viewStatistics.all.total / 100,
              nData: viewStatistics.all.today / 100,
              yData: viewStatistics.all.yesterday / 100,
              tb: ((viewStatistics.all.today - viewStatistics.all.yesterday) / (viewStatistics.all.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 1, {
            name: '佣金成本',
            viewStatistics: {
              allData: viewStatistics.all_cost.total / 100,
              nData: viewStatistics.all_cost.today / 100,
              yData: viewStatistics.all_cost.yesterday / 100,
              tb: ((viewStatistics.all_cost.today - viewStatistics.all_cost.yesterday) / (viewStatistics.all_cost.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 2, {
            name: '微信支付收益',
            viewStatistics: {
              allData: viewStatistics.wx_pay.total / 100,
              nData: viewStatistics.wx_pay.today / 100,
              yData: viewStatistics.wx_pay.yesterday / 100,
              tb: ((viewStatistics.wx_pay.today - viewStatistics.wx_pay.yesterday) / (viewStatistics.wx_pay.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 3, {
            name: '微信支付成本',
            viewStatistics: {
              allData: viewStatistics.wx_cost.total / 100,
              nData: viewStatistics.wx_cost.today / 100,
              yData: viewStatistics.wx_cost.yesterday / 100,
              tb: ((viewStatistics.wx_cost.today - viewStatistics.wx_cost.yesterday) / (viewStatistics.wx_cost.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 4, {
            name: '支付宝支付收益',
            viewStatistics: {
              allData: viewStatistics.ali_pay.total / 100,
              nData: viewStatistics.ali_pay.today / 100,
              yData: viewStatistics.ali_pay.yesterday / 100,
              tb: ((viewStatistics.ali_pay.today - viewStatistics.ali_pay.yesterday) / (viewStatistics.ali_pay.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 5, {
            name: '支付宝支付成本',
            viewStatistics: {
              allData: viewStatistics.ali_cost.total / 100,
              nData: viewStatistics.ali_cost.today / 100,
              yData: viewStatistics.ali_cost.yesterday / 100,
              tb: ((viewStatistics.ali_cost.today - viewStatistics.ali_cost.yesterday) / (viewStatistics.ali_cost.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 6, {
            name: 'IOS收益',
            viewStatistics: {
              allData: viewStatistics.ios_pay.total / 100,
              nData: viewStatistics.ios_pay.today / 100,
              yData: viewStatistics.ios_pay.yesterday / 100,
              tb: ((viewStatistics.ios_pay.today - viewStatistics.ios_pay.yesterday) / (viewStatistics.ios_pay.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 7, {
            name: 'IOS成本',
            viewStatistics: {
              allData: viewStatistics.ios_cost.total / 100,
              nData: viewStatistics.ios_cost.today / 100,
              yData: viewStatistics.ios_cost.yesterday / 100,
              tb: ((viewStatistics.ios_cost.today - viewStatistics.ios_cost.yesterday) / (viewStatistics.ios_cost.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 8, {
            name: '已提现佣金',
            viewStatistics: {
              allData: viewStatistics.withdraw.total / 100,
              nData: viewStatistics.withdraw.today / 100,
              yData: viewStatistics.withdraw.yesterday / 100,
              tb: ((viewStatistics.withdraw.today - viewStatistics.withdraw.yesterday) / (viewStatistics.withdraw.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 9, {
            name: '待提现佣金',
            viewStatistics: {
              allData: viewStatistics.dealwith.total / 100,
              nData: viewStatistics.dealwith.today / 100,
              yData: viewStatistics.dealwith.yesterday / 100,
              tb: ((viewStatistics.dealwith.today - viewStatistics.dealwith.yesterday) / (viewStatistics.dealwith.yesterday || 1) * 100).toFixed(2),
            }
          });
        }
      } else {
        this.$message.error(message || '异常错误');
      }
    },
  }
};
</script>

<style lang="less" scoped>
.dashboard-editor-container {
  padding: 5px 15px 25px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
